<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--表格渲染-->
      <el-table
        ref="table"
        :data="crud.data"
        size="small"
        stripe
        border
        class="leftHeader"
        style="width: 100%;"
        @row-dblclick="editFiled"
      >
        <el-table-column prop="startTime" label="开始时间" align="center">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.startTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间" align="center">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.endTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="elapsedTime" label="耗时，单位秒" align="right" />
        <el-table-column prop="writeSpeed" label="写入速度" align="right" />
        <el-table-column prop="successCount" label="成功数量" align="right" />
        <el-table-column prop="failureCount" label="失败数量" align="right" />
      </el-table>
      <!--分页组件-->
      <pagination />
      <!--表单组件-->
      <el-dialog
        :close-on-click-modal="false"
        :visible.sync="dialogVisible"
        width="70%"
        title="日志详情"
      >
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          class="formClass"
          label-width="120px"
        >
          <div class="fieldset">
            <label class="group">基本信息</label>
            <el-form-item label="迁移编码" class="itemRow">
              <el-input v-model="form.migCode" class="filedWidth" disabled />
            </el-form-item>
            <el-form-item label="成功数据" class="itemRow">
              <el-input v-model="form.totalCount" class="filedWidth" disabled />
            </el-form-item>
            <el-form-item label="查询数据的SQL" class="itemLongRow">
              <el-input
                v-model="form.querySql"
                :rows="3"
                type="textarea"
                class="filedWidth"
                disabled
              />
            </el-form-item>
            <el-form-item label="迁移时间" class="itemRow">
              <el-input v-model="form.startTime" class="filedWidth" disabled />
            </el-form-item>
            <el-form-item label="结束时间" class="itemRow">
              <el-input v-model="form.endTime" class="filedWidth" disabled />
            </el-form-item>
            <el-form-item label="耗时，单位秒" class="itemRow">
              <el-input v-model="form.elapsedTime" class="filedWidth" disabled />
            </el-form-item>
            <el-form-item label="写入速度" class="itemRow">
              <el-input v-model="form.writeSpeed" class="filedWidth" disabled />
            </el-form-item>
            <el-form-item label="成功数量" class="itemRow">
              <el-input v-model="form.successCount" class="filedWidth" disabled />
            </el-form-item>
            <el-form-item label="失败数量" class="itemRow">
              <el-input v-model="form.failureCount" class="filedWidth" disabled />
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="dialogVisible = false">取消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import crudMigLog from '@/api/migLog'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import pagination from '@crud/Pagination'

const defaultForm = {
  id: null,
  migCode: null,
  totalCount: null,
  elapsedTime: null,
  querySql: null,
  startTime: null,
  endTime: null,
  writeSpeed: null,
  failureCount: null,
  successCount: null,
  jobId: null
}
export default {
  name: 'MigLog',
  components: {
    pagination
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  props: {
    migId: {
      type: String,
      default: ''
    }
  },
  cruds() {
    return CRUD({
      title: '迁移日志',
      // 只有在doNotQuery为true的情况下才不走页面初始化时系统的第一次查询
      doNotQuery: true,
      url: 'api/migLog',
      sort: 'id,desc',
      crudMethod: { ...crudMigLog }
    })
  },
  data() {
    return {
      permission: {
        add: ['admin', 'migLog:add'],
        edit: ['admin', 'migLog:edit'],
        del: ['admin', 'migLog:del']
      },
      dialogVisible: false,
      rules: {
        id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
        migCode: [
          { required: true, message: '迁移编码不能为空', trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '迁移时间不能为空', trigger: 'blur' }
        ]
      },
      queryTypeOptions: [{ key: 'migCode', display_name: '迁移编码' }]
    }
  },
  watch: {
    migId: {
      handler() {
        this.query.migCode = this.migId
        this.crud.refresh()
      }
    }
  },
  created() {
    const routeParams = this.$route.query
    this.query.migCode = routeParams.code || ''
    if (!this.query.migCode) {
      return
    }
    this.query.relation = true
    this.crud.refresh()
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      this.query.unQuery = true
      return true
    },
    editFiled(data) {
      Object.assign(this.form, data)
      this.dialogVisible = true
    }
  }
}
</script>

<style>
.leftHeader.el-table th>div{
  text-align: center;
}
</style>
